<template>
  <div>
    <!-- <transition name="el-zoom-in-top"> -->
    <el-row type="flex" justify="center" align="middle" ref="text" v-show="show2">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="submit">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- </transition> -->
  </div>
</template>

<script>
import bg from "../assets/75期/bj2.jpg";
var requireContext = require.context(
  "../assets/75期",
  true,
  /^\.\/.*\.(png|svg|jpg|gif)$/
);
requireContext = requireContext.keys().map(requireContext);
export default {
  data() {
    var usernames = (rule, value, callback) => {
      const ruleName = /^[a-zA-Z0-9_@.]{5,20}$/;
      //   console.log(ruleName.test(value));

      if (!ruleName.test(value)) {
        if (value == "") {
          return;
        }
        callback(new Error("请输入正确的用户名"));
      }
    };
    var passwords = (rule, value, callback) => {
      const rulePassword = /^[A-Za-z0-9_@.]{3,20}$/;
      //   console.log(rulePassword.test(value));

      if (!rulePassword.test(value)) {
        if (value == "") {
          return;
        }
        callback(new Error("请输入正确的密码"));
      }
    };
    return {
      times: null,
      show2: true,
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: usernames, trigger: "blur" }],
        password: [{ validator: passwords, trigger: "blur" }]
      }
    };
  },
  methods: {
    submit() {
      const ruleName = /^[a-zA-Z0-9_@.]{5,20}$/;
      const rulePassword = /^[A-Za-z0-9_@.]{3,20}$/;
      if (
        !ruleName.test(this.form.username) &&
        !rulePassword.test(this.form.password)
      ) {
        this.$message("请输入正确的用户名和密码");
        return;
      }
      if (!ruleName.test(this.form.username)) {
        this.$message("请输入正确的用户名");
        return;
      }
      if (!rulePassword.test(this.form.password)) {
        this.$message("请输入正确的密码");
        return;
      }
      console.log("123");
      this.$axios
        .post("/login", this.form)
        .then(res => {
          if (this.times != null) {
            clearInterval(this.times);
          }
          // console.log(this.times);
          this.$message(res.data.message);
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("user", JSON.stringify(res.data.data.user));
          this.$router.replace("/");
          // this.show2 = !this.show2;
        })
        .catch(message => {
          console.log(message);
        });
    },
    reset() {
      this.form = { username: "", password: "" };
    }
  },
  created() {
    // console.log(time);
    clearInterval(this.times);
    var num = 0;
    this.times = setInterval(() => {
      if (num == requireContext.length) {
        num = 0;
      }
      this.$refs.text.$el.style.background =
        "url(" + requireContext[num] + ") center";
      num++;
    }, 2000);
    // this.$refs.text.$el.style.background =
    //   "url(" + requireContext[5] + ") center";
    // this.$refs.text.$el.style.backgroundColor = "red";
    // console.log(this.$refs.text.$el.style.backgroundColor);
    // console.log(this.$refs.text.$el.style.backgroundImage);
  }
};
</script>

<style lang="less" scoped>
.el-form {
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  line-height: 200px;
  height: 200px;
  width: 400px;
  padding: 50px 70px 10px 20px;

  text-align: center;
}
/deep/.el-form-item__content {
  padding: 0 10px;
}
.el-button {
  margin: 0 20px;
}
.el-row {
  position: absolute;
  bottom: 0;
  top: 0;

  width: 100%;
  background: url("../assets/75期/bj1.jpg") no-repeat center;
}
</style>
